Fix Paint widget width/height and init_image sizing#182
Merged
Conversation
…atch The canvas was sizing itself by measuring the DOM container, which in marimo expands to fill the full cell output width. Now the canvas uses the width and height traitlets directly as its buffer dimensions. Also resizes init_image to match target dimensions before encoding to base64, so get_pil() returns the correct resolution immediately instead of only after the first stroke triggers a canvas export. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Drop tailwindcss from the js-paint build target (now just copies CSS). Update paint demo with new examples (transparent mode, annotation). Adjust zooming example slider ranges and formatting. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Breaking release: Paint widget redesign (new toolbar, dropped Tailwind). Empty canvases now start with a valid transparent PNG in base64 instead of an empty string, so dimensions are always available from the start. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
width/heighttraitlets — previously it measured the DOM container, which in marimo stretches to fill the cell output, making the canvas much wider than requested.init_imageis resized to target dimensions upfront —get_pil()was returning the original image resolution before the first stroke, then jumping to the canvas buffer resolution after drawing. Now the image is resized in the Python constructor so the base64 always matches the canvas dimensions.Test plan
Paint(width=300, height=250)renders a 300×250 canvas (not full-width)Paint(init_image=url, height=300)—get_pil()returns correct dimensions before any drawinginit_imagecanvas doesn't change the output resolution🤖 Generated with Claude Code